let isChat = false;
let index = 0;
$(function () {
    $("#chat-circle, #chat-box-toggle, #chat-popup").click(function () {
        $("#chat-box-body").toggleClass("show")
    });
    generate_message(['<img class="mb-1" src="https://hoppinzq.com/zui/static/picture/bllm6.jpg" alt="avatar">我是客服小Q，现在<span class="text-error font-bold ml-1">不在线</span>，请跳转到<a href="../../zq-apps-chat.html" target="self" class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">知识库</a>提问。'], 'user');
    help_tips(index);
    $("#chat-submit").click(function (e) {
        e.preventDefault();
        let msg = $("#chat-input").val();
        if (msg.trim() == '') {
            $("#input-required").click();
            return false;
        }
        if (isChat) {
            generate_message(['我正在回答 其他问题，请稍后再提问'], 'user');
            return false;
        }
        generate_button_message(msg, 'user');
        generate_message(['我是客服小Q，现在不在线，请跳转到<a href="../../zq-apps-chat.html" target="self" class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">知识库</a>提问。'], 'self');
    })

    if ($("#input-required").length) {

    }
    $(document).delegate(".chat-btn", "click", function () {
        let value = $(this).attr("chat-value");
        let name = $(this).html();
        $("#chat-input").attr("disabled", false);
        generate_message(name, 'self');
    })

});

function generate_message(msg, type) {
    index++;
    $(".chat-logs").append(`<div id="cm-msg-${index}" class="${type} mt-2 flex items-start space-x-2.5 sm:space-x-5">
                    <div class="avatar">
                        <img class="rounded-full" src="https://hoppinzq.com/zui/static/picture/0.jpg" alt="avatar">
                    </div>
                    <div class="flex flex-col items-start space-y-3.5">
                        <div class="mr-4 max-w-lg sm:mr-10">
                            <div id="message-user-chat-answer-${index}" class="chat-area-border rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
                                ${msg}
                            </div>
                        </div>
                    </div>
                </div>`);
    $("#cm-msg-" + index).hide().fadeIn(300);
    if (type == 'self') {
        $("#chat-input").val('');
    }
    $(".chat-logs").stop().animate({scrollTop: $(".chat-logs")[0].scrollHeight}, 1000);
}

function generate_button_message(fake, buttons) {
    index++;
    $(".chat-logs").append(`<div id="cm-msg-${index}" class="user mt-2 flex items-start justify-end space-x-2.5 sm:space-x-5">
                <div class="flex flex-col items-end space-y-3.5">
                    <div class="ml-4 max-w-lg sm:ml-10">
                        <div class="chat-area-border rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
                            ${fake}
                        </div>
                    </div>
                </div>
                <div class="avatar">
                    <img class="rounded-full" src="https://hoppinzq.com/zui/static/picture/0.jpg" alt="avatar">
                </div>
            </div>`);
    $("#cm-msg-" + index).hide().fadeIn(300);
    if (buttons == 'user') {
        $("#chat-input").val('');
    }
    $(".chat-logs").stop().animate({scrollTop: $(".chat-logs")[0].scrollHeight}, 1000);

}

function help_tips(index) {
    index++;
    $(".chat-logs").append2(`<div id="cm-msg-${index}" class="mt-2 flex items-center space-x-2.5 sm:space-x-5">
                        <div class="ml-4 max-w-lg">
                          <div class="mt-2 ml-1 cursor-pointer chat-tips badge bg-info text-white shadow-soft shadow-info/50">
                            客服能干嘛
                          </div>
                          <div class="mt-2 ml-1 cursor-pointer chat-tips badge bg-success text-white shadow-soft shadow-success/50">
                            小Q是?
                          </div>
                          <div class="mt-2 ml-1 cursor-pointer chat-tips badge bg-warning text-white shadow-soft shadow-warning/50">
                            CSGO
                          </div>
                          <div class="mt-2 ml-1 cursor-pointer chat-tips badge bg-error text-white shadow-soft shadow-error/50">
                            DOTA2
                          </div>
                    </div>
                </div>
                <div class="d-flex divider">
                            <small class="text-muted">今天</small>
                        </div>`, function () {
        $(".chat-tips").off("click").on("click", function () {
            let msg = $(this).text();
            if (!msg.length) {

            }
            generate_button_message(msg, "user");
            generate_message(['我是客服小Q，现在不在线，请跳转到<a href="../../zq-apps-chat.html" target="self" class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">知识库</a>提问。'], 'self');
        })
    });
}